<template>
  <div>

    <div v-for="c in orderCommentList" style="text-align: center;margin-top: 15px;background-color: #fff4ee;">
      <div style="border-bottom: 2px dashed #b3b7bc;padding: 5px;font-style: oblique;text-align: left;font-size: 15px;">
        <el-row>
          <el-col :span="6">
            订单编号：
            <span style="font-size: 13px;">{{c.orderId}}</span>
          </el-col>
          <el-col :span="6">
            评价时间：
            <span style="font-size: 13px;">{{c.commentDate}}</span>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 15px;">
        <el-row>
          <el-col :span="4">
            <div>
              站点评分
            </div>
            <div class="comment_text">
              <el-rate :value="c.siteScore" disabled show-score text-color="#ff9900" score-template="{value}">
              </el-rate>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              回收员评分
            </div>
            <div class="comment_text">
              <el-rate :value="c.recycleScore" disabled show-score text-color="#ff9900" score-template="{value}">
              </el-rate>
            </div>
          </el-col>
          <el-col :span="4">
            <div>
              评价内容
            </div>
            <div class="comment_text">
              {{c.content}}
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              评价图片
            </div>
            <div>
              <template v-if="c.commentPhotos && c.commentPhotos.length > 0">
                <el-image style="width: 80px; height: 80px" :src="c.commentPhotos[0]"
                  :preview-src-list="c.commentPhotos">
                </el-image>
              </template>
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              用户昵称
            </div>
            <div class="comment_text">
              {{c.userNickName}}
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              回复内容
            </div>
            <div class="comment_text">
              {{c.replay}}
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              操作
            </div>
            <div>
              <el-button size="mini" @click="cancelComment(c.commentId)">撤销评论</el-button><br>
              <el-button size="mini" @click="replayComment(c.commentId)">回复评论</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 回复订单评论窗口 -->
    <el-dialog
      title="回复评论内容"
      :visible.sync="replayCommentWindow"
      width="30%"
      center>
      <el-input type="textarea" placeholder="回复内容" v-model="replayContent"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelReplay">取 消</el-button>
        <el-button type="primary" @click="okReplayComment">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        orderCommentList: [], //订单评论信息集合
        pageNum: 1, //页数
        pageSize: 5, //每页数量
        page: {}, //分页对象
        siteAccountDTO: {}, //站点登录对象
        replayCommentWindow:false,//回复评论窗口
        replayContent:"",//回复内容
        commentId:"",//评论id
      }
    },
    methods: {
      //确认回复
      okReplayComment(){
        this.$http.post("/comment/comment/siteReplay.site",{
          commentId:this.commentId,
          replay:this.replayContent
        }).then(resp=>{
          if(resp.data.flag){
            this.commentId=""
            this.replayContent=""
            this.replayCommentWindow=false
            this.getOrderCommentList()
          }else{
            alert(resp.data.message)
          }
        })
      },
      //取消回复
      cancelReplay(){
        this.commentId=""
        this.replayContent=""
        this.replayCommentWindow=false
      },
      //回复评论
      replayComment(commentId) {
        this.replayCommentWindow=true
        this.commentId=commentId
      },
      //撤销评论
      cancelComment(commentId) {
        this.$http.post("/comment/comment/siteCancelComment.site?commentId=" + commentId).then(resp => {
          if(resp.data.flag){
            alert(resp.data.message)
            this.getOrderCommentList()
          }else{
            alert(resp.data.message)
          }
        })
      },

      //加载评论信息
      getOrderCommentList() {
        this.$http.post("/comment/comment/getComments", {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          siteId: this.siteAccountDTO.siteId
        }).then(resp => {
          if (resp.data.flag) {
            this.page = resp.data.data
            this.orderCommentList = resp.data.data.records
          } else {
            alert(resp.data.message)
          }
        })
      },
      getSiteAccountDTO() {
        if (localStorage.getItem("siteAccountMessage") != null) {
          let siteAccount = JSON.parse(localStorage.getItem("siteAccountMessage"))
          if (siteAccount != null) {
            this.siteAccountDTO = siteAccount
          }
        }
      }

    },
    created() {
      this.getSiteAccountDTO()
      this.getOrderCommentList()
    }
  }
</script>

<style>
  .comment_text {
    font-size: 13px;
    margin-top: 25px;
  }
</style>
